<template>
    <div class="w-full flex flex-col gap-1">
        <el-image :src="src" fit="cover" class="mx-2 mt-2 rounded" />
        <div v-if="title.length > 0" class="px-2 text-title">
            {{ title }}
            <el-button type="info" text size="small" :icon="MusicList" @click="showList"> 查看列表 </el-button>
        </div>
        <div v-if="showDetail">
            <div class="flex flex-wrap px-2 py-1 text-xs">
                <div v-if="issueId.length > 0" class="pr-1"> {{ issueId }} </div>
                <div v-if="date.length > 0" class="pr-1 pl-1 first:p-0 border-l first:border-0"> {{ date }} </div>
                <div v-if="country.length > 0" class="pr-1 pl-1 first:p-0 border-l first:border-0"> {{ country }} </div>
                <div v-if="type.length > 0" class="pr-1 pl-1 first:p-0 border-l first:border-0"> {{ type }} </div>
            </div>
            <div v-if="tags.length > 0">
                <div class="w-full px-2 py-1 text-sm text-primary bg-primary/20">标签</div>
                <div class="flex flex-wrap p-2 gap-x-0.5 gap-y-1 text-xs">
                    <el-tag v-for="tag in tags" size="small">{{ tag }}</el-tag>
                </div>
            </div>
            <div v-if="tags.length > 0">
                <div class="w-full px-2 py-1 text-sm text-success bg-success/20">演员</div>
                <div class="flex flex-wrap p-2 gap-x-0.5 gap-y-1 text-xs">
                    <el-avatar v-for="tag in tags" :size="60"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                        {{ tag }}
                    </el-avatar>
                </div>
            </div>
            <div v-if="brief.length > 0">
                <div class="w-full px-2 py-1 text-sm text-warning bg-warning/20">简介</div>
                <p class="p-2 text-xs"> {{ brief }} </p>
            </div>
        </div>
        <div v-else class="flex flex-col gap-1 p-2 text-sm">
            <div v-for="(item, index) in list" class="px-2 text-regular bg-primary/20 rounded">
                <span> {{ index + 1 }}</span>
                <span> {{ "、" + item }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { MusicList } from '@icon-park/vue-next';
import { ref } from 'vue';

const showDetail = ref(true)
const showList = () => {
    showDetail.value = !showDetail.value;
}
defineProps({
    title: { type: String, default: '' },
    src: { type: String, default: "" },
    type: { type: String, default: '' },
    issueId: { type: String, default: '' },
    country: { type: String, default: '' },
    date: { type: String, default: '' },
    tags: { type: Array, default: [] },
    list: { type: Array, default: ["hhh", "hhh", "hhh", "hhh"] },
    brief: { type: String, default: '' }
})
</script>
